<template>
    <el-main>
      <!--搜索表单-->
      <QueryForm/>

      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="date"
          label="rep id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="埋点名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="业务线"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="页面"
          width="300">
        </el-table-column>

        <el-table-column
          prop="zip"
          label="元素"
          width="120">
        </el-table-column>

        <el-table-column
          prop="zip"
          label="图片"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              查看详情
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="zip"
          label="类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="状态"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="覆盖端"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="任务id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="最后一次修改时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="创建人"
          width="120">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              查看详情
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <Pageination/>
    </el-main>
</template>

<script>
    import QueryForm from "./QueryForm";
    import Pageination from "./Pageination";
    export default {
      name: "LongListData",
      components: {Pageination, QueryForm},
      methods: {
        deleteRow(index, rows) {
          rows.splice(index, 1);
        }
      },
      data() {
        return {
          tableData: [{
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
        }
      }
    }
</script>

<style scoped>

</style>
